<template>
  <div class="layout">
    <div id="router-content" class="router-content">
      <div>
        <Header />
      </div>
      <div ref="routerView">
        <router-view />
      </div>
      <div>
        <Footer />
      </div>
    </div>
    <el-backtop
      v-if="device === 'desktop' || device === 'ipad'"
      :bottom="100"
      target="#router-content"
    >
      <div class="back-top">
        <img src="../assets/image/backtop/backtop.png" alt="backtop">
      </div>
    </el-backtop>
  </div>
</template>

<script>
import Header from '@/components/Header/header'
import Footer from '@/components/Footer/footer'
import { mapState } from 'vuex'
export default {
  name: 'App',
  components: { Header, Footer },
  data() {
    return {}
  },
  computed: {
    ...mapState({
      device: (state) => state.app.device,
      clientWidth: (state) => state.app.clientWidth
    })
  },
  watch: {
    clientWidth() {
      this.setRouterWidth()
    }
  },
  mounted() {
    this.setRouterWidth()
  },
  methods: {
    setRouterWidth() {
      if (
        this.$refs.routerView !== undefined &&
        this.$refs.routerView.clientWidth !== undefined
      ) {
        const routerWidth = this.$refs.routerView.clientWidth
        this.$store.commit('SET_ROUTER_WIDTH', routerWidth)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.layout {
  height: 100%;
  .router-content {
    height: 100%;
    overflow: auto;
  }
  ::v-deep .el-backtop {
    width: 75px;
    height: 75px;
    background: none;
    box-shadow: none;
  }
  .back-top {
    width: 75px;
    height: 75px;
    img {
      width: 100%;
      height: 100%;
      vertical-align: middle;
    }
  }
}
</style>
